<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>蔬果是真的鲜美！</title>
    <style type="text/css">
        #a1 {
            width: 100%;
            height: 1020px;
            background-color: #00FF00;
            padding-top: 20px;
        }

        #a2 {
            width: 1470px;
            height: 1000px;
            background: url("jsp/images/247685.jpg");
            background-repeat: no-repeat;
            margin: auto;
        }

        #a3 {
            width: 480px;
            height: 320px;
            background-color: #fefff3;
            border: 1px solid #7E7A78;
            position: relative;
            top: 340px;
            margin: auto;
            opacity: 0.8;
        }

        #a4 {
            width: 180px;
            height: 40px;
            margin-left: 40px;
            margin-top: 20px;
            line-height: 40px;
        }

        #a5 {
            width: 400px;
            height: 200px;
            margin-left: 40px;
            margin-top: 20px;
            line-height: 40px;
            display: block;
        }

        .a51 {
            width: 400px;
            height: 50px;
            border: solid 1px #f4f4f4;
            background-color: #ffffff;
        }

        .a511 {
            width: 51px;
            height: 50px;
            float: left;
            background-color: #cccccc
        }

        .a512 {
            width: 346px;
            height: 46px;
            float: left;
            margin-top: 2px;
            border: 0px;
        }

        #a6 {
            clear: both;
            width: 400px;
            height: 200px;
            margin-left: 40px;
            margin-top: 20px;
            line-height: 40px;
            display: none;
        }

        .act {
            text-decoration: none;
        }

        #a41 {
            width: 70px;
            height: 40px;
            float: left;
            text-align: center;
            border-bottom: 2px solid #FF4400;
        }

        #a42 {
            width: 70px;
            height: 40px;
            float: left;
            text-align: center;
            border-bottom: 0px solid #FF4400;
        }

        #a10 {
            text-decoration: none;
        }

        #a10:hover {
            color: #ff0000;
        }
    </style>
</head>
<body>
<div id="a1">
    <div id="a2">
        <div id="a3">
            <div id="a4">
                <div id="a41" onmouseenter="login()"><a href="" class="act">密码登录</a></div>
                <div style="float: left">|</div>
                <div id="a42" onmouseenter="logins()"><a href="" class="act">短信登录</a></div>
            </div>
            <div id="a5">
                <form method="post" action="/userlogin">
                    <div class="a51">
                        <div class="a511"><img src="jsp/people.png"
                                               style="width: 40px;height: 40px;margin: 5px;background-color: #cccccc">
                        </div>
                        <input type="text" name="username" class="a512" placeholder="会员名/邮箱/手机号"
                               style="width: 330px;margin-left: 15px">
                    </div>
                    <div class="a51" style="margin-top: 24px">
                        <div class="a511"><img src="jsp/key.png"
                                               style="width: 40px;height: 40px;margin: 5px;background-color: #cccccc">
                        </div>
                        <input type="password" name="password" class="a512" placeholder="请输入登录密码"
                               style="width: 330px;margin-left: 15px">
                    </div>
                    <div class="a51" style="margin-top: 22px;border: 0px;background-color:#e2e2e2">
                        <input type="submit" value="登录" class="a512" style="background-color:#FF4400;width: 402px">
                    </div>
                </form>
            </div>
            <div id="a6">
                <form method="post" action="">
                    <div class="a51">
                        <div class="a511"><img src="jsp/iphone.png"
                                               style="width: 40px;height: 40px;margin: 5px;background-color: #cccccc">
                        </div>
                        <input type="text" name="username" class="a512" placeholder="请输入手机号"
                               style="width: 330px;margin-left: 15px"><br>
                    </div>
                    <div class="a51" style="margin-top: 24px">
                        <div class="a511"><img src="jsp/messages.png"
                                               style="width: 40px;height: 40px;margin: 5px;background-color: #cccccc">
                        </div>
                        <input type="password" name="password" class="a512" placeholder="请输入验证码"
                               style="width: 260px;margin-left: 15px">
                        <a href="#">
                            <div style="font-size: 13px;width: 72px;height: 50px;float: left;text-align: center;line-height: 50px;background-color: #e8e8e8">
                                获取验证码
                            </div>
                        </a>
                    </div>
                    <div class="a51" style="margin-top: 22px;border: 0px;background-color: #fefff3">
                        <input type="submit" value="登录" class="a512" style="background-color:#FF4400;width: 402px">
                    </div>
                </form>
            </div>
        </div>
        <div id="return" style="width:70px; height: 20px;position: relative;top: 620px;left: 1350px">
            <a href="/jumpindex" id="a10"><span>返回首页</span></a>
        </div>
    </div>
</div>
<script>
    function login() {
        document.getElementById("a5").style.display = 'block';
        document.getElementById("a6").style.display = 'none';
        document.getElementById("a41").style.borderBottom = '2px solid #FF4400';
        document.getElementById("a42").style.borderBottom = '0px solid #FF4400';
    }

    function logins() {
        document.getElementById("a6").style.display = 'block';
        document.getElementById("a5").style.display = 'none';
        document.getElementById("a41").style.borderBottom = '0px solid #FF4400';
        document.getElementById("a42").style.borderBottom = '2px solid #FF4400';
    }
</script>
</body>
</html>

